{%- if settings.show_cart -%}
{%- liquid
  assign show_mini_cart = false
  assign show_drawer_cart = false
  case settings.cart_type
    when 'drawer'
      assign show_mini_cart = false
      if request.page_type != 'cart'
        assign show_drawer_cart = true
      endif
    when 'mini_cart'
      assign show_drawer_cart = false
      if request.page_type != 'cart'
        assign show_mini_cart = true
      endif
    when 'page'
      assign show_drawer_cart = false
      assign show_mini_cart = false
  endcase
-%}
{% endif %}

{% if show_drawer_cart %}
<div class="as-drawer-cart-offcanvas offcanvas offcanvas-end drawer-cart-container border-0 overflow-hidden" tabindex="-1" aria-labelledby="offcanvasRightLabel" aria-hidden="true" id="drawer-cart-items" data-id="drawer-cart">
  <div class="d-flex flex-column flex-nowrap h-100" id="drawer-main-cart-items" data-id="drawer-cart">
    <div class="px-3 px-md-4 flex-grow-0">
      <div class="offcanvas-header px-0 py-3 py-lg-4">
        {% if cart.items.size == 0 %}
          <h1 id="offcanvasRightLabel" class="as-cart-count h4 mb-0 cart-count-tips">{{ 'sections.cart.title' | t }}</h1>
        {% else %}
          <h1 id="offcanvasRightLabel" class="as-cart-count h4 mb-0 cart-count-tips">{{ 'sections.cart_drawer.your_cart' | t: count: cart.item_count }}</h1>
        {% endif %}
        <button type="button" class="gray-600 btn-close drawer-cartt-offcanvas-close" data-bs-dismiss="offcanvas" aria-label="关闭">
          {% render 'icon-close' %}
        </button>
      </div>
    </div>
    <form class="as-cart-with-items cart-with-items drawer-cart{% if cart.items.size == 0 %} is-empty{% endif %}" action="{{ routes.cart_url }}" method="post" id="cart" novalidate>

      <div class="offcanvas-body p-0 drawer-cart-content-wrapper">
        <div class="drawer-cart-content">

          {%- liquid
            case settings.color_schema
              when 'accent1'
                assign background_color = 'bg-primary'
                assign text_color = 'text-primary'
              when 'accent2'
                assign background_color = 'bg-secondary'
                assign text_color = 'text-secondary'
              else
                assign background_color = ''
                assign text_color = ''
            endcase
          -%}
          {%- if settings.text != blank -%}
            <div class="main-cart-notification d-flex align-items-center px-3 py-2 alert fs-footnote {{ background_color }} {{ text_color }} mx-3 mx-md-4 mb-4 mb-md-3 mb-lg-4" role="alert">
              {%- if settings.icon != blank -%}
                <img class="img me-2 align-self-start"
                  width="{{ settings.icon.width }}"
                  height="{{ settings.icon.height }}"
                  src="{{ settings.icon | image_url: width: 24 }}"
                  alt="{{ settings.icon.alt | escape }}"
                  loading="lazy">
              {%- endif -%}
              <div class="no-last-margin richtext-with-link">{{ settings.text }}</div>
            </div>
          {%- endif -%}


          <div class="drawer-cart-content-product">
            <div class="pt-0 px-3 px-md-4">
              <div class="d-flex flex-nowrap justify-content-between fs-footnote gray-600 mb-2">
                <div>{{ 'sections.cart_drawer.product' | t }}</div>
                <div>{{ 'sections.cart_drawer.total' | t }}</div>
              </div>
              {% comment %}List group{% endcomment %}
              <cart-items-1 class="as-cart-items d-block cart-items-1 border-top">
                <ul class="as-cart-items-list list-group list-group-flush pt-3">
                  {% for item in cart.items %}
                  <li class="list-group-item px-0 py-3 bg-transparent clearfix overflow-hidden no-last-margin">
                    <div>
                      <div class="position-relative float-start thumbnail-width">
                        <img width="80" height="{{ 80 | divided_by: item.image.aspect_ratio | ceil }}"
                          loading="lazy"
                          src="{{ item.image | img_url: '80x' }}"
                          srcset="{{ item.image | img_url: '80x' }} 1x, {{ item.image | img_url: '160x' }} 2x, {{ item.image | img_url: '240x' }} 3x"
                          alt="{{ item.image.alt | escape }}"
                          class="img-fluid bg-jasmine">
                        {% comment %}Image{% endcomment %}
                        <a {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} class="stretched-link" href="{{ item.url | within: collections.all }}"></a>
                      </div>
                      <div class="ps-3 ps-md-4 thumbnail-margin-left">
                        <div class="row">
                          <div class="col no-last-margin">
                            <div>
                              <a class="text-body text-decoration-none" style="max-width: 15rem;" {% if item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ item.url }}"><span class="fw-bold">{{ item.product.title | escape }}</span>{% unless item.variant.title contains 'Default' %}<br><span class="small text-muted">{{ item.variant.title | escape }}</span>{% endunless %}</a>
                            </div>
                            {%- comment -%}Cart Item Price{%- endcomment -%}
                            <p class="mt-0 mb-0 small">
                              {% if item.original_price > item.final_price %}
                              <del class="me-2 gray-600">{{ item.original_price | money }}</del>
                              {% endif %}
                              <span class="fw-bold">{{ item.final_price | money }}</span>
                            </p>

                            {%- comment -%}Consumer Customized Message{%- endcomment -%}
                            {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != nil -%}
                              <dl class="mb-0 text-accent small" data-has-only-default-variant="{{ item.product.has_only_default_variant }}" data-properties-size="{{ item.properties.size }}" data-selling-plan-allocation="{{ item.selling_plan_allocation }}">
                                {%- for property in item.properties -%}
                                  {%- assign property_first_char = property.first | slice: 0 -%}
                                  {%- if property.last != blank and property_first_char != '_' -%}
                                    <div class="item-customized-property">
                                      <dt class="d-inline">{{ property.first }}: </dt>
                                      <dd class="d-inline">
                                        {%- if property.last contains '/uploads/' -%}
                                          <a {% if property.last contains 'https://' %} rel="nofollow" {% endif %} href="{{ property.last }}" target="_blank">
                                            {{ property.last | split: '/' | last }}
                                          </a>
                                        {%- else -%}
                                          {{ property.last }}
                                        {%- endif -%}
                                      </dd>
                                    </div>
                                  {%- endif -%}
                                {%- endfor -%}
                              </dl>
                              {%- comment -%}Subscriptiont Purchase{%- endcomment -%}
                              <p class="mb-0 text-accent small item-customized-property">{{ item.selling_plan_allocation.selling_plan.name }}</p>
                            {%- endif -%}

                            {% for discount in item.discounts %}
                            <p class="_discount-allocation mb-0 small text-accent">{{ discount.title }}</p>
                            {% endfor %}
                          </div>
                          <div class="col-auto text-end">
                            <span>
                              {%- if item.original_line_price != item.final_line_price -%}
                                <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                                <span class="fw-bold">{{ item.final_line_price | money }}</span>
                              {%- else -%}
                                <span class="fw-bold">{{ item.original_line_price | money }}</span>
                              {%- endif -%}
                              </span>
                          </div>
                          <div class="col-12{% if template.name == 'cart' %} d-md-none{% endif %}">
                            <hr class="my-3">
                          </div>
                          <div class="col">
                            <div class="d-flex align-items-center justify-content-between">
                              <quantity-input class="as-quantity">
                                <div class="input-group flex-nowrap quantity" style="width: 7rem;">
                                  <button class="quantity-btn as-quantity-btn" type="button" name="minus" {%- if item.quantity <= 1 -%}disabled{%- endif -%} >
                                    <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}</span>
                                    {%- render 'icon-minus' -%}
                                  </button>
                                  <input type="number"
                                    id="quantity-{{ item.index | plus: 1 }}"
                                    data-index="{{ item.index | plus: 1 }}"
                                    name="updates[]"
                                    form="cart"
                                    class="as-form-control-number form-control-number form-control text-center bg-transparent"
                                    step="1" min="1" value="{{ item.quantity }}">
                                    {%- comment -%}Set max on input if there is a metafield{%- endcomment -%}
                                  <button class="quantity-btn as-quantity-btn" type="button" name="plus">
                                    <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}</span>
                                    {%- render 'icon-plus' -%}
                                  </button>
                                </div>
                              </quantity-input>

                              <cart-remove-button-1 id="remove-{{ item.index | plus: 1 }}"
                              class="as-remove-cart-item"
                              data-index="{{ item.index | plus: 1 }}"
                              data-quantity="{{ item.quantity }}">
                              <a {% if item.url_to_remove contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ item.url_to_remove }}" class="small link-muted text-muted" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
                                {% if settings.icon_style == "garbage_can" %}
                                    {% render 'icon-remove' %}
                                  {% else %}
                                    {{ 'sections.cart.remove' | t }}
                                {% endif %}
                              </a>
                              </cart-remove-button-1>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    {%- comment -%}Cart Item Error{%- endcomment -%}
                    <p class="alert alert-danger small d-none mt-3" id="line-item-error-{{ item.index | plus: 1 }}" ><span class="cart-item-error-text"></span></p>
                  </li>
                  {% endfor %}
                </ul>
                <p class="visually-hidden" id="cart-live-region-text" aria-live="polite" role="status"></p>
                <p class="visually-hidden" id="shopping-cart-line-item-status" aria-live="polite" aria-hidden="true" role="status">{{ 'accessibility.loading' | t }}</p>
              </cart-items-1>
            </div>
          </div>
          <div class="border-top">
            <div class="px-3 px-md-4 pt-3 pt-lg-5 pt-md-4 pb-3 pb-md-4">
              <div class="no-last-margin">
                <ul class="list-unstyled as-cart-summary mb-0">
                  {%- comment -%}Cart Total{%- endcomment -%}
                  {% if cart.original_total_price > cart.total_price %}
                  <li class="d-flex justify-content-between mb-2">
                    <span class="totals-subtotal me-2 small">{{ 'sections.cart.subtotal' | t }}</span>
                    <span class="totals-subtotal-valuems-auto text-nowrap small">{{ cart.original_total_price | money_with_currency }}</span>
                  </li>
                  {% endif %}

                  {%- comment -%}
                    {%- if cart.cart_level_discount_applications.size > 0 -%}
                    {%- for discount in cart.cart_level_discount_applications -%}
                      <li class="discounts-discount d-flex justify-content-between mb-2">
                        <span class="discount-title me-2 small">{{ discount.title }}</span>
                        <span class="ms-auto text-nowrap small">- {{ discount.total_allocated_amount | money_with_currency }}</span>
                      </li>
                    {%- endfor -%}
                    {%- endif -%}
                  {%- endcomment -%}

                  {%- if cart.discount_applications.size > 0 -%}
                  {%- for discount in cart.discount_applications -%}
                    <li class="discounts-discount d-flex justify-content-between mb-2">
                      <span class="discount-title me-2 small">{{ discount.title }}</span>
                      <span class="ms-auto text-nowrap small">- {{ discount.total_allocated_amount | money_with_currency }}</span>
                    </li>
                  {%- endfor -%}
                  {%- endif -%}

                  {%- if cart.original_total_price > cart.total_price or cart.discount_applications.size > 0 -%}
                  {%- endif -%}

                  <li data-1="{{cart.original_total_price}}" data-2="{{cart.total_price}}" class="d-flex align-items-center justify-content-between fs-4 fw-bold mb-3 mb-lg-4">
                    <span class="totals-subtotal me-2 mb-0">{{ 'sections.cart.total' | t }}</span>
                    <span class="totals-subtotal-valuems-auto mb-0 fs-6 text-nowrap">{{ cart.total_price | money_with_currency }}</span>
                  </li>
                </ul>

                <small class="text-muted">
                  {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url }}
                  {%- elsif cart.taxes_included -%}
                    {{ 'sections.cart.taxes_included_but_shipping_at_checkout' | t }}
                  {%- elsif shop.shipping_policy.body != blank -%}
                    {{ 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url }}
                  {%- else -%}
                    {{ 'sections.cart.taxes_and_shipping_at_checkout' | t }}
                  {%- endif -%}
                </small>
              </div>

              <div class="cart-summary-footer mt-3 mt-lg-4">
                <div class="cart-ctas as-cart-ctas">
                  <noscript>
                    <button type="submit" class="btn btn-outline-primary btn-lg btn-mw-lg w-100 mb-3 as-btn-cart-update" form="cart">
                      {{ 'sections.cart.update' | t }}
                    </button>
                  </noscript>

                  <button type="submit" class="btn btn-primary btn-lg btn-mw-lg w-100 as-btn-cart-checkout" name="checkout"{% if cart == empty %} disabled{% endif %} form="cart">
                    {{ 'sections.cart.checkout' | t }}
                  </button>
                </div>

                {%- if settings.show_dynamic_checkout_buttons -%}
                  {%- if additional_checkout_buttons -%}
                    <div class="cart-dynamic-checkout-buttons additional-checkout-buttons additional-checkout-buttons--vertical additional-checkout-buttons-lg as-additional-checkout-buttons">
                      {{ content_for_additional_checkout_buttons }}
                    </div>
                  {%- endif -%}
                {%- endif -%}

                <div id="cart-errors" class="small text-danger"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

    <div class="as-empty-cart empty-cart align-items-center justify-content-center flex-grow-1 mx-3 mx-lg-4 border-top">
      <div class="row">
        <div class="col-12">
          <p class="mb-2 h4 text-center">{{ 'sections.cart.empty' | t }}</p>
          <p class="mb-0 text-center">{{ 'sections.cart.empty_content' | t }}</p>
          <div class="mt-6 text-center">
            <a class="btn btn-outline-primary as-cart-continue-shopping btn-mw px-5 py-2"
              {% if settings.continue_shopping_link contains 'https://' %}
                target="_blank" rel="nofollow"
              {% endif %}
              href="{{ settings.continue_shopping_link }}">{{ 'general.cart.continue_shopping' | t }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endif %}
